<template>
    <h3>侦听器</h3>
    <!-- .lazy表示change事件触发变化 -->
    <input type="number" v-model.lazy="number"/>
    <br/>
    {{ '两次输入的差值：' + diff }}
</template>
<script setup>
import { ref, watch } from 'vue'
// 组合式API：尽量数据定义在前，计算属性、侦听器在后，最后是各种函数
const number = ref(0)
// 计算前后两次输入的差值
const diff = ref(0)

// 定义侦听器
watch(
    number, 
    (newVal, oldVal) => {
        diff.value = newVal - oldVal
    }, 
    {deep: false, immediate: false}
)
</script>
<style scoped>
    
</style>